<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <style>
        th{
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="page-header text-center">
            <h2>学生列表</h2>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <span><i class="fa fa-user"></i>&nbsp;学生列表</span>
            </div>
            <div class="panel-body">

                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th><input type="checkbox" name="" id=""></th>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>生日</th>
                            <th>专业</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">

                    </tbody>
                </table>

<!--                分页链接显示区域-->
                <nav class="pagination" id="pagination">
                </nav>
            </div>
            <div class="panel-footer">
                <div class="text-center">&copy; softeem group</div>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            pageRequest(1,2);
            //发送请求
            function pageRequest(pagenow,pagesize){
               $.get('stu/page?pagenow='+pagenow+'&pagesize='+pagesize+"&r="+Math.random(),function(data){
                   console.info(data);
                   renderTable(data);
                   renderPagelink(data);
               })
            }

            //渲染表格
            function renderTable(data){
                //清除所有子节点
                $('#tbody').empty();
                //遍历返回的数据列表
                $(data.list).each(function(i,e){
                    var html = '<tr>';
                    html += '<td><input type="checkbox"></td>';
                    html += '<td>'+(data.startRow + i)+'</td>';
                    html += '<td>'+e.sname+'</td>';
                    html += '<td>'+e.sex+'</td>';
                    html += '<td>'+e.age+'</td>';
                    html += '<td>'+e.birthday+'</td>';
                    html += '<td>'+e.department.deptName+'</td>';
                    html += '<td><a href="">修改</a><a href="">删除</a></td>';
                    html += '</tr>';
                    $('#tbody').append($(html));
                })
            }

            //渲染分页链接
            function renderPagelink(data){
                //清除所有子节点
                $('#pagination').empty();
                $('#pagination').append('<li><a data-page="'+data.prePage+'"><span>&laquo;</span></a></li>');
                $(data.navigatepageNums).each(function(i,page){
                    //判断遍历到的页码数是否就是当前页
                    if(page === data.pageNum){
                        $('#pagination').append('<li class="active"><a data-page="'+page+'">'+page+'</a></li>');
                    }else {
                        $('#pagination').append('<li><a data-page="'+page+'">'+page+'</a></li>');
                    }
                })
                $('#pagination').append('<li><a data-page="'+data.nextPage+'"><span>&raquo;</span></a></li>');
            }

            $('#pagination').on('click','li>a',function(){
                var pagenow = $(this).data('page');
                pageRequest(pagenow,2);
            })
        })
    </script>
</body>
</html>